<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>缺陷猎手大比拼</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="css/common.css">
    <style>
        .container {
            display: flex;
            width: 100%;
            max-width: 1200px;
            gap: 30px;
        }

        .main-panel {
            flex: 2;
            display: flex;
            flex-direction: column;
            align-items: center;
            /*background: rgba(0, 0, 0, 0.5);*/
            border-radius: 20px;
            padding: 30px;
            /*box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);*/
            background: #112142;
            border: 2px solid #0f315f;
        }

        .display-area {
            width: 100%;
            height: 300px;
            /*background: rgba(0, 30, 60, 0.7);*/
            border-radius: 15px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 30px;
            /*border: 3px solid #3498db;*/
            /*box-shadow: 0 0 30px rgba(52, 152, 219, 0.5);*/
        }

        #name-display {
            font-size: 5rem;
            font-weight: bold;
            /*text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);*/
            color: #3498db;
            transition: all 0.3s;
        }

        .control-panel {
            display: flex;
            flex-direction: column;
            gap: 20px;
            width: 100%;
        }

        .button-row {
            display: flex;
            justify-content: center;
            gap: 20px;
        }

        .button {
            padding: 18px 50px;
            font-size: 1.5rem;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s;
            font-weight: bold;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            position: relative;
            overflow: hidden;
        }

        #start-btn {
            background: linear-gradient(to right, #2ecc71, #27ae60);
            color: white;
        }

        #start-btn:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(46, 204, 113, 0.6);
        }

        #start-btn:active {
            transform: translateY(2px);
        }

        #reset-btn {
            background: linear-gradient(to right, #e74c3c, #c0392b);
            color: white;
        }

        #reset-btn:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(231, 76, 60, 0.6);
        }

        .side-panel {
            flex: 1;
            /*background: rgba(0, 0, 0, 0.5);*/
            border-radius: 20px;
            padding: 25px;
            border: 2px solid #0f315f;
            background: #112142;
        }

        .panel-title {
            font-size: 1.8rem;
            text-align: center;
            margin-bottom: 25px;
            color: #f1c40f;
            text-shadow: 0 0 10px rgba(241, 196, 15, 0.5);
        }

        .participant-list {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
            max-height: 400px;
            overflow-y: auto;
            padding: 10px;
        }

        .participant-card {
            background: rgba(255, 255, 255, 0.1);
            padding: 15px;
            border-radius: 10px;
            text-align: center;
            font-size: 1.2rem;
            transition: all 0.3s;
            position: relative;
            overflow: hidden;
        }

        .participant-card.selected {
            background: rgba(46, 204, 113, 0.3);
            border: 2px solid #2ecc71;
            transform: scale(1.05);
        }

        .participant-card.selected::after {
            content: '✓';
            position: absolute;
            top: 5px;
            right: 5px;
            color: #2ecc71;
            font-weight: bold;
        }

        .history-panel {
            margin-top: 30px;
            /*background: rgba(0, 0, 0, 0.5);*/
            background: #112142;
            border: 2px solid #0f315f;
            border-radius: 20px;
            padding: 25px;
            width: 100%;
            max-width: 1200px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
        }

        .history-list {
            display: flex;
            flex-direction: column;
            gap: 15px;
            max-height: 200px;
            overflow-y: auto;
            padding: 10px;
        }

        .history-item {
            background: rgba(255, 255, 255, 0.1);
            padding: 15px;
            border-radius: 10px;
            display: flex;
            justify-content: space-between;
            font-size: 1.2rem;
            animation: fadeIn 0.5s;
        }

        .history-item .order {
            color: #f1c40f;
            font-weight: bold;
        }

        .history-item .name {
            color: #3498db;
            font-weight: bold;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .pulse {
            animation: pulse 0.5s infinite alternate;
        }

        @keyframes pulse {
            from { transform: scale(1); }
            to { transform: scale(1.05); }
        }

        .instructions {
            margin-top: 20px;
            background: rgba(0, 0, 0, 0.3);
            padding: 15px;
            border-radius: 10px;
            font-size: 1.1rem;
            line-height: 1.6;
        }

        .highlight {
            color: #f1c40f;
            font-weight: bold;
        }

        @media (max-width: 768px) {
            .container {
                flex-direction: column;
            }

            .participant-card {
                font-size: 1rem;
                padding: 10px;
            }

            #name-display {
                font-size: 3rem;
            }
        }
    </style>
</head>
<body>
<div class="header">
    <h1>抢答环节</h1>
</div>

<div class="container">
    <div class="main-panel">
        <div class="display-area">
            <div id="name-display">准备就绪</div>
        </div>

        <div class="control-panel">
            <div class="button-row">
                <button id="start-btn" class="button">开始抢答</button>
                <button id="reset-btn" class="button">重置系统</button>
            </div>
        </div>
    </div>

    <div class="side-panel">
        <div class="panel-title">参与者名单</div>
        <div class="participant-list custom-scrollbar" id="participant-list">
            <!-- 参与者列表由JS动态生成 -->
        </div>
    </div>
</div>

<div class="history-panel">
    <div class="panel-title">抢答历史记录</div>
    <div class="history-list custom-scrollbar" id="history-list">
        <!-- 历史记录由JS动态生成 -->
    </div>
</div>


<script>
    $(document).ready(function() {
        // 原始名单
        const allNames = ['牛学璐','王润泽','袁曼娜','郑昊烨','王凯迪','高翔','张木成','吴学孟','朱雪飞','毛铭驿','王欣宇','臧致浩','何振宇','赵盛烨','陈宗昊','万珊宏','庞兆鹏','蔡沅翔','苏雨正','高华贺','周慧博','王东兴','张晓毓','季聪聪','顾修杰'];

        // 状态变量
        let availableNames = [...allNames];
        let selectedNames = [];
        let isSelecting = false;
        let selectionInterval = null;
        let selectionCount = 0;

        // 初始化参与者列表
        function initParticipantList() {
            const list = $('#participant-list');
            list.empty();

            allNames.forEach(name => {
                const card = $('<div class="participant-card">').text(name);
                list.append(card);
            });
        }

        // 更新参与者列表状态
        function updateParticipantList() {
            $('.participant-card').each(function() {
                const name = $(this).text();
                if (selectedNames.includes(name)) {
                    $(this).addClass('selected');
                } else {
                    $(this).removeClass('selected');
                }
            });
        }

        // 添加历史记录
        function addHistoryRecord(name) {
            const historyList = $('#history-list');
            const order = selectedNames.length;
            const historyItem = $(`
                    <div class="history-item">
                        <span class="order">抢答${order}:</span>
                        <span class="name">${name}</span>
                    </div>
                `);

            historyList.prepend(historyItem);
        }

        // 开始选择
        function startSelection() {
            if (availableNames.length === 0) {
                alert('所有参与者都已抢答完毕！');
                return;
            }

            isSelecting = true;
            $('#start-btn').text('停止抢答').css('background', 'linear-gradient(to right, #e67e22, #d35400)');
            $('#name-display').css('color', '#9fc').removeClass('pulse');

            // 随机选择动画
            selectionInterval = setInterval(function() {
                const randomIndex = Math.floor(Math.random() * availableNames.length);
                const randomName = availableNames[randomIndex];
                $('#name-display').text(randomName);
            }, 80);
        }

        // 停止选择
        function stopSelection() {
            isSelecting = false;
            clearInterval(selectionInterval);
            $('#start-btn').text('开始抢答').css('background', 'linear-gradient(to right, #2ecc71, #27ae60)');
            $('#name-display').css('color', '#f00').addClass('pulse');

            // 确定最终选择
            let selectedName;
            selectionCount++;

            // 前两次固定选择
            if (selectionCount === 1) {
                selectedName = '张木成';
            } else if (selectionCount === 2) {
                selectedName = '王欣宇';
            } else {
                // 随机选择剩余名单中的人
                const randomIndex = Math.floor(Math.random() * availableNames.length);
                selectedName = availableNames[randomIndex];
            }

            // 更新显示
            $('#name-display').text(selectedName);

            // 更新名单
            availableNames = availableNames.filter(name => name !== selectedName);
            selectedNames.push(selectedName);

            // 更新UI
            updateParticipantList();
            addHistoryRecord(selectedName);
        }

        // 重置系统
        function resetSystem() {
            clearInterval(selectionInterval);
            availableNames = [...allNames];
            selectedNames = [];
            isSelecting = false;
            selectionCount = 0;

            $('#start-btn').text('开始抢答').css('background', 'linear-gradient(to right, #2ecc71, #27ae60)');
            $('#name-display').text('准备就绪').css('color', '#3498db').removeClass('pulse');
            $('#history-list').empty();
            updateParticipantList();
        }

        // 按钮事件绑定
        $('#start-btn').click(function() {
            if (isSelecting) {
                stopSelection();
            } else {
                startSelection();
            }
        });

        $('#reset-btn').click(resetSystem);

        // 初始化系统
        initParticipantList();
    });
</script>
</body>
</html>